const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const input = document.getElementById("code");

// 随机颜色
function getColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return "rgb(" + r + "," + g + "," + b + ")";
}

// 绘制验证码
function draw() {
    let i;
    context.clearRect(0, 0, 120, 40);
    const chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let code = "";
    for (i = 0; i < 4; i++) {
        const char = chars[Math.floor(Math.random() * chars.length)];
        code += char;
        context.font = "bold " + (20 + Math.floor(Math.random() * 10)) + "px Arial";
        context.fillStyle = getColor();
        context.fillText(char, 20 * i + Math.floor(Math.random() * 10), 30 + Math.floor(Math.random() * 10));
    }

    // 添加干扰线
    for (i = 0; i < 5; i++) {
        context.strokeStyle = getColor();
        context.beginPath();
        context.moveTo(Math.random() * 120, Math.random() * 40);
        context.lineTo(Math.random() * 120, Math.random() * 40);
        context.stroke();
    }

    // 添加涂鸦
    for (i = 0; i < 30; i++) {
        context.fillStyle = getColor();
        context.beginPath();
        context.arc(Math.random() * 120, Math.random() * 40, Math.random() * 3, 0, 2 * Math.PI);
        context.fill();
    }
    return code;
}

// 页面加载直接运行
let generatedCode = draw();

// 点击验证码刷新
canvas.onclick = function () {
    generatedCode = draw();
};
